<template>
    <div class="top">
        <el-breadcrumb separator-class="el-icon-arrow-right" class="top-nav">
            <el-breadcrumb-item :to="{ path: '/home/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商家管理</el-breadcrumb-item>
            <el-breadcrumb-item>新增商家</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card" style="margin-top:20px">
            <div slot="header" class="clearfix">
                <span><i class="el-icon-edit-outline"></i>&nbsp;操作面板</span>
                <!-- <el-button style="float: right; padding: 3px 0" type="text"><i class="el-icon-edit"></i> 新增商家</el-button> -->
            </div>
            <!-- 表单部分 -->
            <el-row>
                <el-col :span="12">
                    <!-- 
                        属性解释:
                            model存放表单数据
                            rules校验规则
                            ref处理重置
                     -->
                    <el-form label-width="80px" class="demo-ruleForm" ref="ruleForm" :model="ruleForm" :rules="rules">
                        <!-- 商家图片 -->
                        <el-form-item label="商家图片" prop="b_img">
                            <!-- 文件上传组件 -->
                            <el-upload class="avatar-uploader" action="http://47.92.27.111:9000/upload" :show-file-list="false"
                                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" fit="cover"> -->
                                <el-image v-if="ruleForm.b_img" :src="ruleForm.b_img" class="avatar" fit="cover" />
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <!-- 表单其他信息 -->
                        <el-form-item label="商家名称" prop="b_name">
                            <el-input v-model="ruleForm.b_name" type="text" name="" id="" placeholder="请输入商家名称"></el-input>
                        </el-form-item>
                        <el-form-item label="商家提供" prop="b_offer">
                            <!-- 复选框组件 -->
                            <el-checkbox-group v-model="ruleForm.b_offer">
                                <el-checkbox label="干净饮用水" name="type"></el-checkbox>
                                <el-checkbox label="消毒猫砂盆" name="type"></el-checkbox>
                                <el-checkbox label="宠物玩具" name="type"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="商家评分" prop="b_score">
                            <el-input v-model="ruleForm.b_score" type="number" name="" id="" placeholder="请输入商家评分">
                                <template slot="append">分</template></el-input>

                        </el-form-item>
                        <el-form-item label="寄养价格" prop="b_price">
                            <el-input v-model="ruleForm.b_price" type="number" name="" id="" placeholder="请输入寄养价格">
                                <template slot="append">元/天</template></el-input>
                        </el-form-item>
                        <el-form-item label="商家面积" prop="b_JS">
                            <el-input v-model="ruleForm.b_JS" type="text" name="" id="" placeholder="请输入店铺面积">
                                <template slot="append">㎡</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="商家地址" prop="b_city">
                            <el-input v-model="ruleForm.b_city" type="text" name="" id="" placeholder="请输入商家地址"></el-input>
                        </el-form-item>
                        <el-form-item label="商家经验" prop="b_feature">
                            <el-input v-model="ruleForm.b_feature" type="text" name="" id=""
                                placeholder="请输入商家经验"></el-input>
                        </el-form-item>
                        <el-form-item label="详细地址" prop="b_city_detail">
                            <el-input v-model="ruleForm.b_city_detail" :rows="2" type="textarea" name="" id=""
                                placeholder="请输入详细地址"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-check" type="primary" @click="submitForm('ruleForm')">添加</el-button>
                            <el-button type="warning" icon="el-icon-refresh-right"
                                @click="resetForm('ruleForm')">重置</el-button>
                            <el-button type="info" icon="el-icon-back" @click="back">返回</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 图片上传成功后,位于服务器的地址
            imageUrl: '',
            rules: {
                b_img: [
                    {
                        required: true,
                        message: "请选择商家图片",
                        trigger: "blur"
                    }
                ],

                b_name: [
                    {
                        required: true,
                        message: "请填写商家名称",
                        trigger: "blur",
                    },
                ],
                b_city: [
                    {
                        required: true,
                        message: "请填写商家所在地",
                        trigger: "blur",
                    },
                ],
                b_socre: [
                    {
                        required: true,
                        message: "请填写评分",
                        trigger: "blur",
                    },
                ],
                b_price: [
                    {
                        required: true,
                        message: "请填写价格",
                        trigger: "blur"
                    }
                ],
                b_offer: [
                    {
                        required: true,
                        message: "请至少选择一个商家所供",
                        trigger: "change",
                    },
                ],
                b_JS: [
                    {
                        required: true,
                        message: "请填写店铺面积",
                        trigger: "blur"
                    }],
                b_feature: [
                    {
                        required: true,
                        message: "请填写商家经验",
                        trigger: "blur"
                    },
                ],
                b_city_detail: [
                    {
                        required: true,
                        message: "请填写详细地址",
                        trigger: "blur"
                    },
                ],
            },
            ruleForm: {
                b_img: '',
                b_price: '',
                b_JS: '',
                b_score: '',
                b_feature: '',
                b_city: '',
                b_city_detail: '',
                b_offer: [],
                b_name: ''
            },


        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 校验通过
                    // 将商家所供,由数组转换为字符串
                    this.$set(this.ruleForm, "b_offer", this.ruleForm.b_offer.toString())

                    this.$axios.post(this.$api.businessAdd, this.ruleForm).then(res => {
                        if (res?.code == 202) {
                            this.$message.error(res.msg)
                            this.$router.replace("/login")
                        }
                        console.log(res);
                        if (res?.data?.code == 200) {
                            this.$message.success(res?.data?.msg)
                            this.resetForm('ruleForm')
                        } else {
                            this.$message.error(res?.data?.msg)
                        }
                    }).catch(err => {

                    })
                }
            }
            )
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        handleAvatarSuccess(res, file) {
            console.log(res);
            this.ruleForm.b_img = res.data
            console.log("图片位于服务器的地址", this.ruleForm.b_img);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        back() {
            this.$router.back()
        }
    },

}
</script>

<style>



.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>
